import React, { useState, useEffect } from 'react'
import { Card, Input, Row, Col, Table, Pagination, message, Tag } from 'antd'
import { getOrdersAPI } from '../../app/order'
import dayjs from 'dayjs'

const { Search } = Input
export default function Orders () {
    // 查询信息
    const [queryInfo, setQueryInfo] = useState({ query:'', pagenum:1, pagesize:10 })
    // 初始化订单列表数据
    const [ordersData, setOrdersData] = useState([])
    // 初始化订单总条数
    const [ordersTotal, setOrdersTotal] = useState(0)
    // 搜索订单
    const onSearch = (query) => {
        setQueryInfo(preState => ({...preState, query}))
    }
    // 获取所有订单列表
    const getAllOrders = async () => {
        const { meta, data: { total, goods } } = await getOrdersAPI(queryInfo)
        if(meta.status !== 200) return message.error('获取订单列表数据失败')
        setOrdersTotal(total)
        goods.forEach((item, index) => item.index = index)
        setOrdersData(goods)
    }
    // 监测queryInfo发生改变
    useEffect(() => {
        getAllOrders()
    }, [queryInfo])
    const columns = [
        {
            title: '#',
            dataIndex: 'index'
        },
        {
            title: '订单编号',
            dataIndex: 'order_number'
        },
        {
            title: '订单价格',
            dataIndex: 'order_price'
        },
        {
            title: '是否付款',
            dataIndex:'pay_status',
            render: text => {
                const component = <>
                {
                    text === '0' ? <Tag color="warning">未付款</Tag> : <Tag color="success">已付款</Tag>
                }
                </>
                return component
            }
        },
        {
            title: '是否发货',
            dataIndex: 'is_send'
        },
        {
            title: '下单时间',
            dataIndex: 'create_time',
            render: text => {
                return dayjs(text * 1000).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        {
            title: '操作',
            dataIndex: 'operate'
        }
    ]
    // 分页改变
    const paginationChange = (pagenum, pagesize) => {
        // console.log(pagenum);
        // console.log(pagesize);
        setQueryInfo(preState => ({...preState, pagenum, pagesize}))
    }
    return (
        <Card className="orders-container">
            <Row>
                <Col span={12}>
                    <Search onPressEnter={(e) => {onSearch(e.target.value)}} onSearch={onSearch} placeholder="请输入内容" />
                </Col>
            </Row>
             {/* table表格 */}
             <Table
                 bordered
                 style={{ margin: '20px 0' }}
                 columns={columns}
                 dataSource={ordersData}
                 pagination={false}
                 rowKey="order_id"
             />
            {/* 分页 */}
            <Pagination
                total={ordersTotal}
                showTotal={total => `总共 ${total} 条`}
                defaultPageSize={queryInfo.pagesize}
                current={queryInfo.pagenum}
                pageSizeOptions={[10, 20, 30, 50]}
                onChange={paginationChange}
                showSizeChanger
            />
        </Card>
    )
}